<template>
  <div class="main-container container-fluid container-limited page-holder flex">
    <el-menu class="sidebar a-link-item shrink-0" :default-active="activeIndex">
      <el-menu-item class="sidebar-item" index="spaces">
        <router-link :to="`${$route.path}?type=spaces`">关注空间</router-link>
      </el-menu-item>
      <el-menu-item class="sidebar-item" index="docs">
        <router-link :to="`${$route.path}?type=docs`">资源收藏</router-link>
      </el-menu-item>
      <el-menu-item class="sidebar-item" index="issues">
        <router-link :to="`${$route.path}?type=issues`">问题收藏</router-link>
      </el-menu-item>
      <el-menu-item class="sidebar-item" index="comments">
        <router-link :to="`${$route.path}?type=comments`">回答收藏</router-link>
      </el-menu-item>
    </el-menu>
    <div class="flex-1 p-x-16">
      <resources-issues-list
        v-if="activeIndex === 'docs' || activeIndex === 'issues'"
        :list-type="activeIndex"
        :resources="list[activeIndex]"
        :loading="loading"
      />
      <comments-list
        v-else-if="activeIndex === 'comments'"
        :list-type="activeIndex"
        :resources="list[activeIndex]"
        :loading="loading"
      />
      <spaces-list v-else :spaces="list.spaces" :loading="loading" />
      <pagination :current-page="pagination.current" :page-count="pagination.count" />
    </div>
  </div>
</template>

<script>
import { formatResources } from '@/components/spaces/resources-v2/format';
import { formatIssuesList } from '@/components/spaces/issues/format';
import { formatComments } from '@/components/issues-answers/format';
import { formatSpacesList } from '@/components/spaces/format';
import ResourcesIssuesList from './resources-issues-list';
import SpacesList from './spaces-list';
import CommentsList from './comments-list';

export default {
  name: 'UserCollection',
  components: { ResourcesIssuesList, SpacesList, CommentsList },
  data() {
    return {
      list: {
        docs: [],
        issues: [],
        spaces: [],
        comments: [],
      },
      loading: false,
      pagination: {
        current: null,
        count: null,
      },
    };
  },
  computed: {
    activeIndex() { return this.$route.query.type || 'docs'; },
    loadCollectionsParams() {
      return {
        userId: this.$route.params.userId,
        type: this.initParamsType,
        page: this.$route.query.page || 1,
      };
    },
    initParamsType() {
      switch (this.activeIndex) {
        case 'docs': return 'ProductFile';
        case 'issues': return 'Issue';
        case 'spaces': return 'Product';
        case 'comments': return 'Comment';
        default: return 'ProductFile';
      }
    },
  },
  created() { this.loadCollections(); },
  methods: {
    loadCollections() {
      this.loading = true;
      this.$api.other.collectionList(this.loadCollectionsParams)
        .then((res) => {
          this.list[this.activeIndex] = this.handleList(res.data);
          this.pagination.current = res.kaminari.current_page;
          this.pagination.count = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    handleList(list) {
      switch (this.activeIndex) {
        case 'docs': return formatResources(list);
        case 'issues': return formatIssuesList(list);
        case 'spaces': return formatSpacesList(list);
        case 'comments': return formatComments(list);
        default: return [];
      }
    },
  },
  watch: {
    loadCollectionsParams() { this.loadCollections(); },
  },
};
</script>

<style></style>
